<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>promise</title>
</head>
<body>
    
    <script>
    
      /*   {
            // es5 的回调函数

            let ajax = function (callback) {
                console.log('1');
                setTimeout(() => {
                    callback&&callback.call();
                }, 1000);
            }

            ajax(function () {
                console.log('async function');
            });

        }


        {
            // es6 promise

            let ajax = function () {
                console.log('2');

                return new Promise ((resolve,reject)=>{
                    setTimeout(() => {
                        resolve();
                    }, 1000);
                    
                });
                
            }

            ajax().then(()=>{
                console.log('promise resolve');
            });
        }
 */

       /*  {
            // 多个回调

            let ajax = function () {
                console.log('2');

                return new Promise ((resolve,reject)=>{
                    setTimeout(() => {
                        resolve();
                    }, 1000);
                    
                });
                
            }

            ajax()
            .then(()=>{
                return new Promise ((resolve,reject)=>{
                    setTimeout(() => {
                        resolve();
                    }, 2000);
                    
                });
            })
            .then(()=>{
                console.log('3');
            });


        }
     */


     /* {
         // 捕获错误 下一步下一步的过程中出错了 用catch捕获错误

         let ajax = function (num) {
            console.log('ajax');
            return new Promise((resolve,reject)=>{
                if (num>5) {
                    resolve();
                } else {
                    throw Error('Error...');
                }
            });
         }

         ajax(4).then(()=>{
             console.log('this is number 6');
         }).catch((err)=>{
             console.log('catch',err);
         });

     }
 */

    /*  {
         // 所有的图片加载完毕之后 再加载页面
        // promise.all （实际上是一个批量处理promise的方法） 里边接受的promise实例数组  把多个promise实例当作I一个实例  当其中的所有的实例完成之后 才会then
        // promise

        function loading(src){
            return new Promise((resolve,reject)=>{
                let img = document.createElement('img');
                img.src = src;
                img.onload = function () {
                    resolve(img);
                }

                img.onerror = function (err) {
                    reject(err);
                }
            });
        }

        function showImgs (imgs) {
            imgs.forEach(img => {
                document.body.appendChild(img);
            });
        }

        Promise.all([
            loading('http://img.redocn.com/sheji/20170616/baiyangyubaiyangzuokatongchatusheji_8322825.jpg'),
            loading('http://img.redocn.com/sheji/20160310/keaikatongxiaomachahua_5976412.jpg'),
            loading('http://img.redocn.com/sheji/20160112/xiaodongwukeaichatu_5734670.jpg')
        ]).then(showImgs);

     }
     */

     {
         // promise.race()  几个实例 哪个先返回就先输出

         // 有一个图片加载完毕之后  就显示
        function loading(src){
            return new Promise((resolve,reject)=>{
                let img = document.createElement('img');
                img.src = src;
                img.onload = function () {
                    resolve(img);
                }

                img.onerror = function (err) {
                    reject(err);
                }
            });
        }

        function showImg (img) {
            let p = document.createElement('p');
            p.appendChild(img);
            document.body.appendChild(p);
        }

        Promise.race([
            loading('http://img.redocn.com/sheji/20170616/baiyangyubaiyangzuokatongchatusheji_8322825.jpg'),
            loading('http://img.redocn.com/sheji/20160310/keaikatongxiaomachahua_5976412.jpg'),
            loading('http://img.redocn.com/sheji/20160112/xiaodongwukeaichatu_5734670.jpg')
        ]).then(showImg);
         
     }
    
    </script>
</body>
</html>